<template>
  <div>
    <div class="open-head">
      <easy-head :headName="headName" :returnUrl="returnUrl"></easy-head>
    </div>
    <div class="order-select">
      <div class="gettime">
        <div style="margin-left: 5%">
          <input type="text" readonly="readonly"
                 style="margin-top: 3%;font-weight: 600;text-align: center;border: #cccccc solid 0.03rem"
                 class="layui-input" id="test1" v-model="bTime" @click="getTime(0)"
                 placeholder="开始时间"
          >
        </div>
        <div style="width: 10%;line-height: 1.2rem"><span>到</span></div>
        <div>
          <input type="text" readonly="readonly"
                 style="margin-top: 3%;font-weight: 600;text-align: center;border: #cccccc solid 0.03rem"
                 class="layui-input" id="test2" v-model="bTime" @click="getTime(0)"
                 placeholder="开始时间"
          >
        </div>
        <div style="width: 10%;line-height: 1rem;margin-left: 2.5%">
          <button type="button" class="layui-btn layui-btn-sm" style="background-color: #ff5d33">点击查询</button>
        </div>
      </div>
      <div class="order-class">
        <div class="order-info">
          <div style="margin-left: 0.6rem;color: white;font-weight: 600;height: 0.5rem;line-height: 0.8rem">
            时间：2019-08-17 16:35
          </div>
          <div class="goods-head">
            <div>商品</div>
            <div>单价</div>
            <div>数量</div>
            <div>折扣</div>
            <div>合计</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>

          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>

          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info"  style="height: 0.5rem">
            <div style="  width: 50%;height: 0.7rem;line-height: 0.7rem">订单状态：已完成</div>
            <div  style="  width: 50%;height: 0.7rem;line-height: 0.7rem">订单总额：5元</div>
          </div>
        </div>
        <div class="order-info">
          <div style="margin-left: 0.6rem;color: white;font-weight: 600;height: 0.5rem;line-height: 0.8rem">
            时间：2019-08-17 16:35
          </div>
          <div class="goods-head">
            <div>商品</div>
            <div>单价</div>
            <div>数量</div>
            <div>折扣</div>
            <div>合计</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>

          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>

          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info" style="height: 0.5rem">
            <div>辣条</div>
            <div>0.5</div>
            <div>5</div>
            <div>0</div>
            <div>2.5元</div>
          </div>
          <div class="goods-info"  style="height: 0.5rem">
            <div style="  width: 50%;height: 0.7rem;line-height: 0.7rem">订单状态：已完成</div>
            <div  style="  width: 50%;height: 0.7rem;line-height: 0.7rem">订单总额：5元</div>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  import easyHead from "../easyHead/easyHead"

  export default {
    name: "myorder",
    data() {
      return {
        beginTime: {
          elem: '#test1'//指定元素
          , trigger: 'click'
          , done: function (value, date, endDate) {
            this.bTime = value
            console.log(this.bTime)
          }

        },
        beginTime2: {
          elem: '#test2'//指定元素
          , trigger: 'click'
          , done: function (value, date, endDate) {
            this.eTime = value
            console.log(this.eTime)

          }
        },
        eTime: '',
        bTime: '',
        returnUrl: "/myindex",
        headName: "订单查询",
      }
    },
    methods: {
      getTime(i) {

        let laydate = layui.laydate;

        if (i === 0) {

          //执行一个laydate实例
          laydate.render(this.beginTime);
        } else {
          laydate.render(this.beginTime2);

        }

        console.log(this.eTime)

      },
    },
    components: {
      easyHead
    },
    mounted() {
      let laydate = layui.laydate;
      //执行一个laydate实例
      laydate.render(this.beginTime2);
      laydate.render(this.beginTime);
    }
  }
</script>

<style scoped>

  .goods-info>div{
    font-weight: 500;
    float: left;
    width: 20%;
    text-align: center;
    height: 0.5rem;
    line-height: 0.4rem;
  }
  .goods-head > div {
    float: left;
    height: 0.8rem;
    width: 20%;
    text-align: center;
    line-height: 1rem;

  }

  .order-info>div{
    clear: both;
  }
  .order-info {
    background-color: #ff5d33;
    font-size: 0.35rem;
    font-family: 微软雅黑;
    clear: both;
    border: solid 1px red;
  }

  .gettime {
    height: 1.2rem;
    border-bottom: 0.01rem solid #cccccc;
  }

  .gettime > div {
    width: 30%;
    float: left;
    text-align: center;
  }

</style>
